<template>
  <div class="loginBox">
    <div class="formSty">
      <h2 class="loginTitle">全市"十项重点工作"日常考核信息管理系统</h2>
      <el-form class="form" ref="loginRef" :model="loginForm" :rules="LoginRules">
        <el-form-item prop="username">
          <el-input prefix-icon="el-icon-user" v-model="loginForm.username"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input prefix-icon="el-icon-lock" type="password" v-model="loginForm.password" @keyup.enter.native="submitForm('loginRef')"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="loginBtn" type="primary" @click="submitForm('loginRef')">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loginForm: {
        username: "",
        password: ""
      },
      LoginRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 0, max: 12, message: "长度在 6 到 12 个字符", trigger: "blur" }
        ]
      }
    };
  },
  created(){
    this.isSessId();
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$axios.post('/login',this.loginForm,2)
            .then(res=>{
                if(res.code==200){
                    this.$message({
                        message: res.msg,
                        type: 'success'
                    });
                    localStorage.setItem('token',res.data.token);
                    localStorage.setItem('taskId',res.data.taskId);
                    localStorage.setItem('departmentId',res.data.departmentId);
                    localStorage.setItem('username',this.loginForm.username);
                    localStorage.setItem('permissions',JSON.stringify(res.data.group.permissions));
                    localStorage.setItem('groupId',JSON.stringify(res.data.group.groupId));
                    this.$router.push('/dashboard');
                }else{
                    this.$message({
                        message: res.msg,
                        type: 'warning'
                    });
                }
            })
            .catch(err=>{
                this.$message({
                        message: res.msg,
                        type: 'warning'
                    });
            })
        } else {
          return false;
        }
      });
    },
    isSessId() {
      if (localStorage.getItem("token")) {
        this.$router.push("/index");
      } else {
        this.$router.push("/");
      }
    }
  }
};
</script>
<style scoped>
.loginTitle {
  text-align: center;
  color: #023ba5;
  font-size: 40px;
  margin-bottom: 100px;
}
.loginBox {
  width: 100%;
  height: 100%;
  background: url(../../static/img/login.jpg) no-repeat;
  background-size:100% 100%;
  background-attachment:fixed;
  display: flex;
  justify-content: center;
  align-items: center;
}
.formSty {
  width: 480px;
  height: 350px;
}
.loginBtn {
  width: 100%;
  margin-top: 30px;
}
.form{
  padding: 0 70px;
}
</style>